<div id="quicksearch">
    <div class="recentsearch">
        <h4>Recent Searches</h4>

            <? 
            $display_size = 5;
            $more_items_exist = (sizeof($search_items) > $display_size) ? TRUE : FALSE;

            $i = 0;
            foreach($search_items as $item) {
            ?>

                <? if ($i==$display_size) { ?>
                <span id="more_search_items" style="display:none">
                <? } ?>

                <p><a href="<?=site_url('products/search_results/'.$i)?>"><?=$item?></a></p>

                <? if ($i==sizeof($search_items)-1 && $more_items_exist) { ?>
                </span>
                <? } ?>

            <?  
                $i++;
            } 
            ?>

            <p>
                <? if ($more_items_exist) { ?>
                    <a class="more" id="link_more" href="#">more...</a>
                    <a class="more" id="link_less" href="#" style="display:none">less...</a> |                   
                <? } ?>

                <a class="more" href="<?=site_url('website/product_search/clear_history'.uri_string())?>">clear search history</a>
            </p>

    </div>
</div>



<script type="text/javascript">
//window.addEvent('domready', function(){

    $('link_more').addEvent('click', function(e) {
        e = new Event(e).stop();
        $('more_search_items').setStyle('display', 'block'); 
        $('link_less').setStyle('display', 'inline'); 
        $('link_more').setStyle('display', 'none'); 
    });

    $('link_less').addEvent('click', function(e) {
        e = new Event(e).stop();
        $('more_search_items').setStyle('display', 'none'); 
        $('link_less').setStyle('display', 'none'); 
        $('link_more').setStyle('display', 'inline'); 
    });
        
//}); 
</script>